<script setup>
    import { ref } from 'vue';
    import { use } from 'echarts/core';
    import { PieChart } from 'echarts/charts';
    import { LegendComponent, ToolboxComponent } from 'echarts/components';
    import { CanvasRenderer } from 'echarts/renderers';
    import VChart from 'vue-echarts'
    import { BarChart } from 'echarts/charts'
    import { GridComponent } from 'echarts/components'
    use([LegendComponent, ToolboxComponent, PieChart, CanvasRenderer])
    use([GridComponent, BarChart, CanvasRenderer])

    
    const tableData = [
    {
        userid: '12',
        action: 'login_success',
        time: '2023-07-03',
    },
    {
        userid: '12',
        action: 'download',
        time: '2023-07-01',
    },
    {
        userid: '12',
        action: 'login_success',
        time: '2023-07-01',
    },
    {
        userid: '12',
        action: 'login_success',
        time: '2023-06-30',
    },
    {
        userid: '12',
        action: 'login_fail',
        time: '2023-06-30',
    },
    {
        userid: '12',
        action: 'login_success',
        time: '2023-06-29',
    },
    {
        userid: '12',
        action: 'login_success',
        time: '2023-06-29',
    },
    {
        userid: '12',
        action: 'login_success',
        time: '2023-06-28',
    },
    {
        userid: '12',
        action: 'login_success',
        time: '2023-06-27',
    },
    {
        userid: '12',
        action: 'login_success',
        time: '2023-06-26',
    }
    ]

//-----------------for charts dependences------------ 
    const behavioroption = ref({
    // legend: {
    //     top: 'bottom',
    //     textStyle: {
    //         color: 'black'
    //     }
    // },
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
        }
    },
    series: [
        {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 150],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
            borderRadius: 8
        },
        data: [
            { value: 40, name: 'Login_success' },
            { value: 38, name: 'Login_failed' },
            { value: 32, name: 'Download' },
            { value: 30, name: 'inflow' },
        ]
        }
    ]
});

  const distributionoption = ref({
      xAxis: {
          type: 'category',
          data: ['0-4', '4-8', '8-12', '12-16', '16-20', '20-24'],
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
          }
      ]
  }) 

</script>

<!--script below is for searchbox-->
<script>
  import axios from 'axios';
  import { ref } from 'vue';

  export default {
    data() {
      return {
        searchId: '',
        tableData: []  // Initialize tableData as an empty array
      };
    },
    methods: {
      handleSearch() {
        // Check if searchId is valid (not empty or negative)
        if (this.searchId.trim() === '' || parseInt(this.searchId) < 0) {
          alert('请输入有效的ID');
          return;
        }

        // Construct the API URL with the searchId as a query parameter
        const apiUrl = `Auditor/ResourceUserLog`;

        // Send GET request to backend API with searchId as parameter
        axios.get(apiUrl, {
          params: {
            id: this.searchId
          }
        })
          .then(response => {
            // Update tableData with the response data from backend
            this.tableData = response.data;
          })
          .catch(error => {
            console.error('请求失败:', error);
            // Handle error, e.g., show an error message
            alert('请求失败，请重试');
          });
      }
    }
  };
</script>

<template>
    <div class="User_log">
      <div class="User_log_search_charts">
          <h2>用户日志查询</h2>
          <div class="search-box">
            <input v-model="searchId" type="text" placeholder="请输入ID" class="search-input"  />
            <button @click="handleSearch" class="search-button">查询</button>
          </div>
          <el-table :data="tableData" class="user_log_table">
              <el-table-column prop="userid" label="用户id" width="180" />
              <el-table-column prop="action" label="用户行为" width="180" />
              <el-table-column prop="time" label="时间" />
          </el-table>
      </div>
      <div class="User_log_charts">
          <div class="Resource_user_behavior">
            <h2>登录时段统计：</h2><br>
            <v-chart class="chart" :option="distributionoption"></v-chart>
        </div>
      </div>
    </div>
</template>


<style scoped>
.User_log {
  margin-top: 2%;
  display: inline-flex;
  width: 100%;
  border: 1px gainsboro solid;
  border-radius: 10px;
}

.User_log_charts{
    display: flex;
    border-radius: 10px;
    width: 60%;
    height: 600px;
    background-color: white;
}

.User_log_search_charts{
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    width: 40%;
    background-color: white;
    margin-right: 0.5%;
    
}

h2{
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 8%;
    text-align: center;
}

.search-box {
  display: flex;
  align-items: center;
  width: 98%;
  height: 10%;
  margin: 0;
}

.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #3498db; /* 蓝色边框 */
  border-radius: 4px;
  font-size: 16px;
}

.search-input:focus {
  outline: none;
  border-color: #2980b9; /* 获得焦点时变更边框颜色 */
}

.search-button {
  margin-left: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #3498db; /* 蓝色背景 */
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.search-button:hover {
  background-color: #2980b9; /* 鼠标悬停时变更背景颜色 */
}

.user_log_table{
    display: flex;
    width: 100%;
    height: auto;
    background-color: transparent;
}

.Resource_user_behavior{
    display: inline-flex;
    width: 100%;
    flex-wrap: wrap;
    height: 100%;
}

.Resource_user_behavior h2{
    border-radius: 10px 0 0 0;
    width: 100%;
    height: 8%;
    margin: 0px;
}

.user_behavior_chartchart{
    display: flex;
    height: 100%;
    width: 100%;
    margin: 0px;
}

.distribution_chart{
    display: flex;
    height: 100%;
    width: 100%;
    margin: 0px;
}
</style>